<template>
  <div id="app">
    <h1>商城登录</h1>
    <ul>
      <li>
        <span class="grayColor">手机号</span>
        <input type="text" placeholder="请输入手机号" v-model="mobile" maxlength="11"
               oninput="value=value.replace(/[^\d]/g,'')">
      </li>
      <li>
        <span class="grayColor">密码</span>
        <input type="password" placeholder="请输入密码" v-model="password">
      </li>
<!--      <li>
        <input type="text" placeholder="请输入手机验证码">
        <span>denglu</span>
      </li>-->
    </ul>
    <a class="btn login" @click="_login">登录</a>
    <p>点击登陆，即表示阅读并同意<span @click="_serviceAgreement">《商城服务协议》</span></p>
    <Protocol :message.sync="isShow"></Protocol>
  </div>
</template>

<script>
  import Protocol from '../commonList/Protocol'
  import  {isCorrectPhoneNumber} from '../../assets/js/commom'
  import  {localStorageSet} from '../../assets/js/localStorage'
  export default {
    name: "login",
    components:{
      Protocol
    },
    data() {
      return {
        isShow: false,
        mobile:'',
        password:''
      }
    },
    methods: {
      _login(){
        if(!this.mobile) {
          this.$Toast('手机号不能为空')
          return
        }
        if (!isCorrectPhoneNumber(this.mobile)) {
          this.$Toast('请输入正确的手机格式')
          return
        }
        if (!this.password) {
          this.$Toast('密码不能为空')
          return
        }
        this.$Indicator.open({
          text: 'Loading...',
          spinnerType: 'fading-circle'
        });
        let _this = this
        let params = {
          mobile: this.mobile,
          password: this.password,
        };
        this.$http.post('user/api/user/login', params)
          .then(function (response) {
            _this.$Indicator.close()
            if (response.data.rc == 200) {
              _this.$router.push('/' )
              // localStorageSet("token",response.data.data.token);
              localStorageSet("token",response.data.data.code);
              localStorageSet("code",response.data.data.code);
            }else {
              _this.$Toast(response.data.msg)
            }
          })
          .catch(function (error) {
            _this.$Indicator.close()
            _this.$Toast(error.message)
            console.log(error);
          });
      },
      _serviceAgreement() {
        this.isShow = !this.isShow
      }
    }
  }
</script>

<style scoped lang="less">
  #app {
    padding: 0 1.5rem;
    h1 {
      font-size: 0.725rem;
      padding: 2rem 0 1.5rem;
    }
    ul {
      li {
        display: flex;
        height: 2.34rem;
        border-bottom: 1px solid #dcdcdc;
        font-size: 0.597rem;
        span {
          flex: 2;
          line-height: 2.34rem;
        }
        input {
          height: 100%;
          border: 0;
          outline: none;
          flex: 8;
          &:-webkit-autofill {
            -webkit-box-shadow: 0 0 0px 1000px white inset !important;
          }
        }
        &:nth-of-type(2) {
          input {
            width: 72%;
          }
          span {
            color: #ff9500;
            font-size: 0.597rem;
          }
        }
      }
    }
    .login {
      margin: 0.8rem auto 0.576rem;
    }
    p {
      font-size: 0.426rem;
      span {
        color: #ff9500;
      }
    }
  }
</style>
